<template>
  <div class="departments">
    <el-card class="box-card">
      <!-- 第一行 -->
      <tree-tool :treeNode="company" :isRoot="true" />

      <el-divider></el-divider>

      <el-tree
        :data="data"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <!-- 把data传递给这个组件里的treeNode -->
        <tree-tool
          slot-scope="{ data }"
          :treeNode="data"
          @delDept="getdelzu"
          @addDept="addDept"
          @editDept="doDept"
        />
      </el-tree>

      <addDepts :pid="currentId" :showDialog.sync="showDialog" ref="addDepts" />
    </el-card>
  </div>
</template>

<script>
// 导入组件
import treeTool from './components/tree-tools.vue'
// 导入请求函数
import { getzuzhi, delzuzhi } from '@/api/zuzhi'
//导入转化树状
import { transToTreeData } from '@/utils/index'
import addDepts from './components/add-depts.vue'

export default {
  name: 'index',
  components: {
    treeTool,
    addDepts
  },
  data () {
    return {
      showDialog: false,
      currentId: '',
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      // 绑定tree的默认显示文字和子节点
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      data: [
        {
          id: 1,
          manager: '孙财',
          name: '总裁办'
        },
        {
          id: 2,
          name: '行政部',
          manager: '旺辉'
        },
        {
          id: 3,
          name: '人事部',
          manager: '辉辉'
        },
        {
          id: 4,
          name: '财务部',
          manager: '孙财',
          children: [
            {
              id: 5,
              name: '财务核算部',
              manager: '卓狗'
            }
          ]
        }
      ]
    }
  },

  created () {
    // 发请求获取列表数据
    this.getdelzu()
  },

  methods: {
    // 因为created要用，后面有个地方也要用
    // 所以就把发请求的代码封装成函数
    async getdelzu () {
      // 发请求
      let res = await getzuzhi()
      // console.log(res)
      // 修改公司名
      this.company.name = res.data.companyName

      // 发现每个数据都有pid属性，其中pid为空字符串的是一级架构
      // 遍历数组，先找出1级的节点
      let list = res.data.depts

      //调用递归函数得到树形数组赋值给data
      this.data = transToTreeData(list, '')
    },
    //点击新增子部门触发
    addDept (id) {
      this.showDialog = true
      this.currentId = id
    },
    doDept () {}
  }
}
</script>

<style>
.box-card {
  margin: 20px;
  padding: 140px 120px;
}
</style>
